<template>
  <view class="header">
    <up-input v-model="formData.name" @change="changeFn" placeholder="搜索工厂和动态" border="none" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #A8A8A8"></up-input>
    <view class="tabList">
      <view @click="tabClick('1')" :class="{ item: true, active: tabActive == '1' }">工厂</view>
      <view @click="tabClick('2')" :class="{ item: true, active: tabActive == '2' }">动态</view>
    </view>
  </view>
  <view class="main">
    <view v-if="tabActive === '1'">
      <template v-if="factoryList?.length > 0">
        <CompanyCard @boxClick="boxClick(item)" v-for="(item, index) in factoryList" :key="index" :info="item" :isBtn="false" />
        <u-loadmore height="30" :status="status" />
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
    <view v-if="tabActive === '2'">
      <template v-if="factoryList.length > 0">
        <TrendsItem v-for="(item, index) in factoryList" :key="index" :info="item"> </TrendsItem>
        <u-loadmore height="30" :status="status" />
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center; margin-top: 15rpx">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import TrendsItem from "@/components/trendsItem.vue";
import CompanyCard from "@/components/companyCard.vue";
import { searchFactory, searchPost } from "@/api/home";
//@ts-ignore
import { onReachBottom, onShow } from "@dcloudio/uni-app";
import { goPage } from "@/utils/commonFn";
const tabActive = ref("1");
const tabClick = (e: string) => {
  tabActive.value = e;
  factoryList.value = [];
  getList();
};
const formData = ref({
  pageNum: 1,
  pageSize: 10,
  name: "",
});
onMounted(() => {
  rest();
});
const status = ref("loadmore");
const factoryList = ref<any[]>([]);
const getList = async () => {
  status.value = "loadmore";
  let res;
  if (tabActive.value === "1") {
    res = await searchFactory(formData.value);
  } else {
    res = await searchPost(formData.value);
  }
  factoryList.value = factoryList.value.concat(res.rows);
  if (factoryList.value.length >= (res.total as number)) {
    status.value = "nomore";
  } else {
    status.value = "loadmore";
  }
};
const rest = () => {
  formData.value.pageNum = 1;
  factoryList.value = [];
  status.value = "loadmore";
  getList();
};
onReachBottom(() => {
  formData.value.pageNum++;
  getList();
});
const changeFn = () => {
  //@ts-ignore
  uni.$u.debounce(async () => {
    status.value = "loadmore";
    formData.value.pageNum = 1;
    factoryList.value = [];
    getList();
  }, 500);
};

const boxClick = (info: HomeTypes.factoryList) => {
  if (uni.getStorageSync("userInfo").level !== "1") {
    uni.showModal({
      title: "提示",
      cancelText: "取消",
      confirmText: "开通会员",
      content: "您未开通会员，暂时无法查看",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/activateMembership");
        }
      },
    });
    return;
  }
  goPage(`/pages/findJob/factoryDetails?id=${info.id}`);
};
</script>

<style lang="less" scoped>
.header {
  background: #fff;
  padding: 10rpx 24rpx;
  /deep/ .u-input {
    background: #f7f8fa;
    padding: 12rpx !important;
    margin-right: 10rpx;
  }
  .tabList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 152rpx;
    padding-top: 34rpx;
    padding-bottom: 10rpx;
    .item {
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      color: #bebebe;
      line-height: 44rpx;
    }
    .active {
      color: #1e1e1e;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -17rpx;
        width: 56rpx;
        height: 8rpx;
        background: linear-gradient(90deg, rgba(66, 110, 254, 0.5) 0%, #426efe 100%);
      }
    }
  }
}
</style>
